<template>
  <div>
    <div>
      <el-input v-model="val" style="width:200px;height:29px"></el-input>
      <el-button @click="search" size="mini" style="margin-left:10px">查询学生</el-button>
    </div>
    <el-button @click="xz" style="margin-Top:10px">新增</el-button>
    <el-dialog :append-to-body="true" :visible.sync="show">
      <div style="padding:0 10px">
        <div>
        </div>
        姓名<el-input v-model="name"></el-input>
        年龄<el-input v-model="age"></el-input>
        性别<el-input v-model="sex"></el-input>

        <el-button size="mini" style="margin:10px" @click="addindex==0?add():compile()">{{addindex==0?'添加':'编辑'}}</el-button>
      </div>
    </el-dialog>

    <!-- <el-input></el-input> -->
    <table>
      <thead>
        <tr>
          <th colspan="4">增删改查</th>
        </tr>
      </thead>
      <tbody>
        <tr>    
          <td>姓名</td>
          <td>年龄</td>
          <td>性别</td>
          <td>操作</td>
        </tr>
        <tr v-for="(item,index) in school1" :key="index" :class="index%2!=0?'auqle':''" v-if="school.length>0">
          <td>{{item.name}}</td>
          <td>{{item.age}}</td>
          <td>{{item.sex}}</td>
          <td>
            <el-button size="mini" style="margin-left:10px" @click="editor(item,index)">编辑</el-button>
            <el-button @click="del(index)">删除</el-button>
          </td>
        </tr>
        <tr v-if="school1.length==0">
          <td colspan="5">
            <el-empty description="暂无内容"></el-empty>
          </td>
        </tr>
      </tbody>
    </table>

  </div>
</template>
<script>
export default {
  name: 'App',
  data() {
    return {
      val: '',
      name: '',
      age: '',
      sex: '',
      addindex: 0,
      show: false,
      schoolindex: '',
      school: new Array(5).fill().map((v, i) => {
        return { name: i % 2 != 0 ? '张三' : '李四', age: Math.floor(Math.random() * (100 - 10)) + 10, sex: Math.random() > 0.5 ? '男' : '女' }
      }),
      school1: []
    }
  },
  mounted() {
    this.school1 = this.school
    // console.log(this.school);
  },
  methods: {
    search() {
      this.val == '' ? this.school1 = this.school : this.school1 = this.school.filter(r => r.name.includes(this.val) || r.sex.includes(this.val))
    },
    xz() {
      this.name = ''
      this.sex = ''
      this.age = ''
      this.show = true
      this.addindex = 0
    },
    editor(e, index) {
      this.show = true
      this.name = e.name
      this.age = e.age
      this.sex = e.sex
      this.addindex = 1
      this.schoolindex = index
      // console.log(e);
    },
    add() {

      this.addindex = 0
      if (this.name == '' || this.age == '' || this.sex == '') return this.$message.error('请输入东西');
      if (this.school.some(r => r.name == this.name)) {
        this.$message.error('不能重复添加相同姓名')
      } else {
        this.school.push({
          name: this.name,
          age: this.age,
          sex: this.sex
        })
        this.name = ''
        this.age = ''
        this.sex = ''
        this.show = false
        // this.addindex=0
      }
      // if (this.val == '') {
      //   this.$msg_e('不能为空')
      // } else if (this.val > 100) {

      //   if (this.val == 520) {
      //     this.list.push(this.val)
      //   } else {
      //     this.$msg_e('数字不能大于100')
      //   }
      // } else {
      //   this.list.push(this.val)
      //   this.val = ''
      // }
      // this.val == '' ? this.$msg_e('不能为空') : this.val > 100 ? this.val == 520 ? this.list.push(this.val) : this.$msg_e('不能大于100') : this.list.push(JSON.parse(this.val))
    },
    compile() {
      let stu = this.school[this.schoolindex]
      stu.name = this.name
      stu.age = this.age
      stu.sex = this.sex
      this.show = false
    },
    del(index) {
      this.$confirm('确实删除吗?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        });

        this.school.splice(index, 1)

      }).catch(() => {

        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },
    close() {
      this.show = false
      this.name = ''
      this.age = ''
      this.sex = ''
    }
  }
}
</script>
<style scoped lang='scss'>
table {
  width: 500px;
  margin: auto;
  border-collapse: collapse;
  th,
  td {
    padding: 5px 10px;
    text-align: center;
    border: 1px solid black;
  }
  .auqle {
    background-color: aqua;
  }
}

.addArea {
  width: 200px;
  border: solid;
  div {
    display: flex;
    // width: 80%;
    justify-content: center;
    // justify-content: center;
    p:nth-child(2) {
      margin-left: 40px;
      // float: right;
    }
  }
}
</style>